.box {
  display: -webkit-box;
  /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
  display: -moz-box;
  /* 老版本语法: Firefox (buggy) */
  display: -ms-flexbox;
  /* 混合版本语法: IE 10 */
  display: -webkit-flex;
  /* 新版本语法: Chrome 21+ */
  display: flex;
  /* 新版本语法: Opera 12.1, Firefox 22+ */

  -moz-box-orient: horizontal; /*Firefox*/
  -webkit-box-orient: horizontal; /*Safari,Opera,Chrome*/
  box-orient: horizontal;
  flex-direction: row;
  -webkit-flex-direction: row;
}

.box-x-center {
  -webkit-box-pack: center;
  -moz-justify-content: center;
  -webkit-justify-content: center;
  justify-content: center;
}

.box-x-left {
  -webkit-box-pack: start;
  -moz-justify-content: flex-start;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
}

.box-x-right {
  -webkit-box-pack: end;
  -moz-justify-content: flex-end;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
}

.box-x-right-flex {
  display: -webkit-box;
  /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
  display: -moz-box;
  /* 老版本语法: Firefox (buggy) */
  display: -ms-flexbox;
  /* 混合版本语法: IE 10 */
  display: -webkit-flex;
  /* 新版本语法: Chrome 21+ */
  display: flex;
  /* 新版本语法: Opera 12.1, Firefox 22+ */

  -moz-box-orient: horizontal; /*Firefox*/
  -webkit-box-orient: horizontal; /*Safari,Opera,Chrome*/
  box-orient: horizontal;
  flex-direction: row;
  -webkit-flex-direction: row;
  -webkit-box-pack: end;
  -moz-justify-content: flex-end;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
}

.box-y-center {
  display: -webkit-box;
  /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
  display: -moz-box;
  /* 老版本语法: Firefox (buggy) */
  display: -ms-flexbox;
  /* 混合版本语法: IE 10 */
  display: -webkit-flex;
  /* 新版本语法: Chrome 21+ */
  display: flex;
  /* 新版本语法: Opera 12.1, Firefox 22+ */

  -moz-box-orient: horizontal; /*Firefox*/
  -webkit-box-orient: horizontal; /*Safari,Opera,Chrome*/
  box-orient: horizontal;
  flex-direction: row;
  -webkit-flex-direction: row;
  -webkit-box-align: center;
  -moz-align-items: center;
  -webkit-align-items: center;
  align-items: center;
}

.box-y-bottom {
  -webkit-box-align: end;
  -moz-align-items: end;
  -webkit-align-items: flex-end;
  align-items: flex-end;
}

.box-item,
.box-center {
  -webkit-box-pack: center;
  -moz-justify-content: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -moz-align-items: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-flex: 1;
  -moz-flex-shrink: 0;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  -moz-box-orient: horizontal; /*Firefox*/
  -webkit-box-orient: horizontal; /*Safari,Opera,Chrome*/
  box-orient: horizontal;
  flex-direction: row;
  -webkit-flex-direction: row;
}

.box-wrap {
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  -moz-box-lines: multiple; /*Firefox*/
  -webkit-box-lines: multiple; /*Safari,Opera,Chrome*/
  box-lines: multiple;
}

.box-row {
  -moz-box-orient: vertical; /*Firefox*/
  -webkit-box-orient: vertical; /*Safari,Opera,Chrome*/
  box-orient: vertical;
  flex-direction: column;
  -webkit-flex-direction: column;
}

.box-row-flex {
  -webkit-flex: 1 1 auto;
  -moz-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  -o-flex: 1 1 auto;
  flex: 1 1 auto;
  height: 1%;
}

.box-col-flex {
  -webkit-flex: 1 1 auto;
  -moz-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  -o-flex: 1 1 auto;
  flex: 1 1 auto;
  width: 1%;
}

.box-space-bettwen {
  -webkit-box-pack: justify;
  -moz-justify-content: space-between;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-box-align: center;
  -moz-align-items: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-flex: 1;
  -moz-flex-shrink: 0;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}

.box-no-shrink {
  -moz-flex-shrink: 0;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}
